<template>
	<view class="operator-apply">
		<u-navbar title="运营申请" :title-bold="true" title-color="#000" back-icon-color="#000">
			<view class="explain">
				运营申请说明
			</view>
		</u-navbar>
		<view class="content-box">
			<view class="top">
				<u-icon class="icon" name="attach"></u-icon>
				<view class="title">
					运营者权益
				</view>
				<u-icon class="icon" name="attach"></u-icon>
			</view>
			<view class="content">
				<view class="item" v-for="(item,index) in equityList" :key="index">
					<view class="tag">
						<view class="tag-txt">申请解锁</view>
					</view>
					<view class="dot-box">
						<view class="center-box">

							<view class="top">
								<view class="top-left">
									<u-icon class="top-left-icon" name="star-fill" size="15"></u-icon>
								</view>
								<view class="circular-box">
									<u-icon class="circular-icon" :name="item.icon" size="60"></u-icon>
								</view>
								<view class="buttom-right">
									<u-icon class="buttom-right-icon" name="star-fill" size="13"></u-icon>
								</view>
							</view>

							<view class="content">{{item.title}}</view>
							<view class="bottom">{{item.content}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="bottom">更多权益规划中,敬请期待...</view>
		</view>
		<view class="bottom-box">
			<u-button class="apply-button" :disabled="disabled" @click="apply">
				<view class="apply-button-txt">
					{{applyButtonText}}
				</view>
			</u-button>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				equityList: [{
						icon: 'map',
						title: '地区管理',
						content: '管理地区和地图数据信息'
					},
					{
						icon: 'bookmark',
						title: '版块管理',
						content: '管理地区内版块数据信息'
					},
					{
						icon: 'order',
						title: '审核管理',
						content: '管理帖子和评论的审核'
					},
					{
						icon: 'level',
						title: '申请认证',
						content: '申请获得系统专属认证'
					},
				],
				time: 0,
				disabled: false,
				applyButtonText: '申请成为运营者'
			}
		},
		created() {
			this.init()
		},
		methods: {
			apply() {
				this.$u.api.operatorApplyData.apply().then(res => {
					if (res.data) {
						this.disabled = true
						this.applyButtonText = '请等待审核完成'
					}
				})
			},
			init() {
				this.getRemainingTime()
			},
			getRemainingTime() {
				this.$u.api.operatorApplyData.remainingTime().then(res => {
					this.time = res.data
					this.judgeTime()
				})
			},
			judgeTime() {
				if (this.time === 99999) {
					this.disabled = true
					this.applyButtonText = '请等待审核完成'
				} else if (this.time <= 0) {
					this.disabled = false
					this.applyButtonText = '申请成为运营者'
				} else if (this.time <= 30) {
					this.disabled = true
					this.applyButtonText = '请在' + this.time + '天后申请'
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-position: center center;
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-size: cover;
		background-image: url("../../../static/platform/svg/operation_apply_bg.svg");
	}

	.operator-apply {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 93vh;

		.explain {
			display: flex;
			flex: 1;
			justify-content: end;
			margin-right: 30rpx;
			font-size: 28rpx;
			font-weight: 700;
			color: #999;
		}

		.content-box {
			width: 96%;
			padding-bottom: 30rpx;
			border: #39A5E8 solid 2px;
			color: #00aaff;
			background-color: #fff;
			background-image: linear-gradient(to right, rgba(237, 245, 251, 1) 1px, transparent 1px),
				linear-gradient(to bottom, rgba(237, 245, 251, 1) 1px, transparent 1px);
			background-size: 6px 6px;
			background-position: center;
			border-radius: 20rpx;

			.top {
				margin: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.icon {
					margin: 0 20rpx;
				}

				.title {
					color: #000;
					font-size: 18px;
					font-weight: 700;

				}



			}

			.bottom {
				font-size: 16px;
				font-weight: 700;
				text-align: center;
			}

			.content {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;

				.item {
					width: calc(50% - 50rpx);
					border: #00aaff dashed 1px;
					border-radius: 10rpx;
					background: #fff;
					margin: 20rpx 10rpx;
					padding: 10rpx;
					position: relative;


					.tag {
						position: absolute;
						top: 0;
						right: 0;
						background: #1CA1F7;
						padding: 5rpx;
						border-radius: 6rpx;
						margin: 8rpx;

						.tag-txt {
							font-size: 11px;
							color: #fff;
						}
					}


					.dot-box {
						background: radial-gradient(circle at 1px 1px, #00aaff 1px, transparent 0);
						background-size: 5px 5px;



						.center-box {
							padding: 0 20rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							flex-direction: column;
							background-image: radial-gradient(rgba(255, 255, 255, 1.0) 50%,
									rgba(255, 255, 255, 1.0),
									rgba(255, 255, 255, 0.5));




							.top {
								position: relative;

								.top-left {
									.top-left-icon {
										position: absolute;
										top: -5rpx;
										left: -20rpx;
										filter: blur(0.4px);

									}
								}

								.circular-box {
									display: flex;
									justify-content: center;
									align-items: center;
									width: 80rpx;
									height: 80rpx;
									background-color: #EAF7FF;
									border-radius: 50%;

									.circular-icon {
										display: flex;
									}
								}

								.buttom-right {
									.buttom-right-icon {
										position: absolute;
										bottom: -5rpx;
										right: -20rpx;
										filter: blur(0.4px);
									}
								}
							}



							.content {
								display: flex;
								font-size: 15px;
								color: #000;
								font-weight: 700;
							}

							.bottom {
								margin-bottom: 20rpx;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
								overflow: hidden;
								text-overflow: ellipsis;
								font-size: 14px;
								color: #999;
								font-weight: 700;

							}
						}

					}

				}



			}

		}

		.bottom-box {
			display: flex;
			align-items: center;
			padding: 0rpx 30rpx;
			background: #fff;

			.apply-button {
				flex: 1;
				background: #4DE1FF;
				color: #fff;

				.apply-button-txt {
					color: #000;
					font-weight: 700;
				}
			}
		}
	}
</style>